﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8" />
		<title>无缝滚动</title>
	</head>

	<body>
		<style type="text/css">
			#demo {
				background: #FFF;
				overflow: hidden;
				border: 1px dashed #CCC;
				width: 800px;
			}
			
			#demo img {
				border: 3px solid #F2F2F2;
				padding: 2px;
				width: 200px;
			}
			
			#demot {
				float: left;
				width: 1000%;
			}
			
			#demo1,
			#demo2 {
				float: left;
			}
			
			#demo2 {
				background-color: #099;
			}
		</style>
		<div id="demo">
			<div id="demot">
				<div id="demo1">
					<a href="#"><img src="img/hf1.jpg" />11</a>
					<a href="#"><img src="img/hf2.jpg" />22</a>
					<a href="#"><img src="img/hf3.jpg" />33</a>
					<a href="#"><img src="img/hf4.jpg" />44</a>
					<a href="#"><img src="img/hf5.jpg" />55</a>
				</div>
				<div id="demo2"></div>
			</div>
		</div>
		<script>
			<!--
			var speed = 50;
			var demo = document.getElementById("demo");
			var demo1 = document.getElementById("demo1");
			var demo2 = document.getElementById("demo2");
			demo2.innerHTML = demo1.innerHTML;

			function Marquee() {
				if(demo1.offsetWidth - demo.scrollLeft <= 0) {
					demo.scrollLeft -= demo1.offsetWidth;
					//临界值999， 995，  0 - 到步值之间
				} else {
					demo.scrollLeft += 5;
				}
			}
			var MyMar = setInterval(Marquee, speed);
			demo.onmouseover = function() {
				clearInterval(MyMar)
			};
			demo.onmouseout = function() {
				MyMar = setInterval(Marquee, speed)
			};
			-->
		</script>
	</body>

</html>